<template>
  <el-dialog v-bind="$attrs" v-on="$listeners">
    <div class="download-template"><a :href="baseUrl + '/static/vue2-element-admin/template/用户导入模板.xlsx'" download>下载导入模板<i class="el-icon-download"></i></a></div>
    <!-- 文件上传 -->
    <section class="upload-wrap">
      <el-upload class="upload" drag ref="fileUpload" action="#" :auto-upload="false" accept=".xls, .xlsx" :limit="1" :show-file-list="false" :on-change="fileUpload" v-if="!(file && file.name)">
        <img class="upload-icon" :src="require('@/assets/imgs/icon-upload.png')" alt srcset />
        <p class="upload-title">点击上传您的文件</p>
        <p class="upload-tip">文件不得超过10M</p>
      </el-upload>
      <div v-else>
        <img class="upload-icon"  :src="require('@/assets/imgs/icon-upload-success.png')" alt srcset />
        <p class="upload-tip">{{file.name}}</p>
        <el-upload class="upload-btn" drag ref="fileUpload" action="#" :auto-upload="false" accept=".xls, .xlsx" :limit="1" :show-file-list="false" :on-change="fileUpload">重新上传</el-upload>
      </div>
    </section>

    <section class="result-box" v-if="file">
      <div class="result-title">数据校验结果</div>
      <div class="table-box flex-c-s">
        <div class="col flex-c-s flex-col">
          <span class="field">总数据</span>
          <span class="value">{{importInfo.totalNum}}</span>
        </div>
        <div class="col flex-c-s flex-col">
          <span class="field">可导入</span>
          <span class="value">{{importInfo.okNum}}</span>
        </div>
        <div class="col flex-c-s flex-col">
          <span class="field">格式错误</span>
          <span class="value">{{importInfo.errorNum}}</span>
        </div>
        <div class="col flex-c-s flex-col">
          <span class="field">操作</span>
          <span class="value primary" @click="viewErrReason">{{importInfo.errorNum ? "查看错误原因" : "--"}}</span>
        </div>
      </div>
    </section>
    <el-tag class="import-tips" type="success" v-if="file && !importInfo.errorNum">数据格式检测显示数据无误，点击下方确定按钮确认导入数据！</el-tag>
    <el-tag class="import-tips" type="danger" v-if="file && importInfo.errorNum">数据格式检测显示数据存在错误，请修改后重新上传！</el-tag>
    <div slot="footer" class="dialog-footer">
      <template>
        <el-button @click="$emit('close')">关 闭</el-button>
        <el-button type="primary" :disabled="!!importInfo.errorNum" @click="confirmImport">确 定</el-button>
      </template>
    </div>
  </el-dialog>
</template>
<script>
import { downloadFileByBlob } from "@/utils/download"
import {userApi, commonApi} from "@/api"
export default {
  name: "import-dialog",
  data() {
    return {
      baseUrl: process.env.VUE_APP_SERVER_URL,
      file: null, // 文件
      importInfo: {
        okNum: 0,
        errorNum: 0,
        totalNum: 0
      }, // 校验结果
      uuid: "" // 凭证
    }
  },
  methods: {
    // 重置数据
    reset() {
      this.file = null, // 文件
      this.importInfo = {
        okNum: 0,
        errorNum: 0,
        totalNum: 0
      } // 校验结果
      this.uuid = "" // 凭证
    },
    // 确定导入
    confirmImport() {
      userApi.confirmImport({uuid: this.uuid}).then(data => {
        this.$modal.msgSuccess("批量导入用户成功！")
        this.$emit("success")
      })
    },
    // 下载错误文件
    viewErrReason() {
      if (!this.importInfo.errorNum) { return }
      commonApi.getImportErrorReasonFileByUuid({uuid: this.uuid}).then(data => {
        downloadFileByBlob(data, "导入用户错误原因.xlsx", "octet-stream")
        this.$modal.msgSuccess("错误原因文件已下载成功")
      })
    },
    // 文件上传 校验excel文件
    fileUpload(file){
      const fileType = file.name.substring(file.name.lastIndexOf(".") + 1)
      if (fileType === "xlsx" || fileType === "xls") {
        if (file.size <= 10 * 1024 * 1024) {
          const formData = new FormData
          formData.append("file", file.raw, file.name)
          userApi.validateImportFile(formData).then(data => {
            this.file = file
            this.importInfo = {
              okNum: data.okNum,
              errorNum: data.errorNum,
              totalNum: data.totalNum
            }
            this.uuid = data.uuid
          }).catch(err => {
            this.importInfo = {
              okNum: 0,
              errorNum: 0,
              totalNum: 0
            }
            this.file = null
            this.$modal.msgError("上传失败，请重新上传!")
          })
        } else {
          this.$modal.msgWarning("文件不得超过10M")
        }
      } else {
        this.$modal.msgWarning("请上传正确的文件格式哟～")
      }
      // 清除掉组件的上传数据， 否则多次无法重新上传
      this.$refs.fileUpload.clearFiles()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dialog {
  .download-template {
    font-size: 18px;
    color: #2a79ee;
    cursor: pointer;
  }
   .upload-wrap {
    margin: 42px auto 32px;
    text-align: center;
    width: 346px;
    padding: 16px 0;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(114, 154, 215, 0.23);
    border-radius: 16px;
    ::v-deep .el-upload{
      width: 100%;
      .el-upload-dragger{
        width: 100%;
        height: 100%;
        border: none !important;
      }
    }
    .upload-icon {
      width: 90px;
      height: 90px;
      margin: 12px 0 0;
    }
    p {
      margin: 0;
    }
    .upload-title {
      margin-top: 14px;
      font-size: 18px;
      color: #1a3a5c;
      font-weight: bold;
      cursor: pointer;
    }
    .upload-tip {
      margin-top: 18px;
      font-size: 14px;
      color: #1a3a5c;
      padding: 0 20px;
    }
    .xz-ellipsis-3 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .upload-btn {
      color: #2a79ee;
      width: 88px;
      height: 30px;
      border: 1px solid #2a79ee;
      text-align: center;
      line-height: 28px;
      margin: 24px auto 0;
      font-size: 12px;
      font-weight: bold;
      border-radius: 4px;
    }
  }

  .result-box {
    .result-title {
      font-size: 18px;
      color: #333;
    }

    .table-box {
      margin-top: 12px;
      border: 1px solid #999;
      .col {
        width: 25%;
        border-right: 1px solid #999;
        &:last-child {
          border-right: none;
        }
        .field {
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: #eee;
          font-size: 14px;
          color: black;
          border-bottom: 1px solid #999;
        }
        .value {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: black;
          &.primary {
            color: #2a79ee;
            cursor: pointer;
          }
        }
      }
    }
  }

  .import-tips {
    margin-top: 12px;
  }
}
</style>